<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>OpenID Consumer</title>
	<link href="/stylesheets/openid.css" rel="stylesheet" type="text/css"/>
	<!-- Combo-handled YUI CSS files: -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
	  <!-- Combo-handled YUI JS files: -->
	  <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>

	  <style type="text/css">
		#MySpaceTabs {
			margin:4em auto;
			min-width:970px;
			width:74.6em;
		}
	  </style>

	</head>

	<body class="yui-skin-sam">

	  <!-- <div id="navbar"> -->
	  <!--    <a href="http://code.google.com/appengine/"> -->
	  <!--       <img src="/static/appengine_button_noborder.gif" -->
	  <!--            style="vertical-align: middle" /></a> -->
	  <!-- </div> -->

	  <div id="header">
		<a href="/"><img id ="openid-logo" alt="OpenID" src="/images/openid-logo.png" /></a> <br/> <br/>
		<p id="title">MySpaceID "Combined Consumer" - Demonstrates usage of MySpaceID, OpenID/oAuth "hybrid" extension and MySpace REST APIs to fetch a MySpace user's data</p>
	  </div>

	  <div id="body">

		<form method="post"
			  action='<%= url_for :action => 'start' %>'>
		<%= token_tag %>
		Enter your MySpaceID Below:

		  <table><tr><td>
			<!--  You can also use http://stage-api.myspace.com below -->

			<p><input type="text" name="openid_identifier" id="openid" size="50" value="http://openid.myspace.com/<VANITY_NAME_HERE>" />
			<input type="submit" value="Get MySpace Data" /></p>

			</td><td>

			<% if flash[:alert] %>
			<span class='cancel'>
			  <%= h(flash[:alert]) %>
			</span>
			<% end %>
			<% if flash[:error] %>
			<span class='error'>
			  <%= h(flash[:error]) %>
			</span>
			<% end %>
			<% if flash[:success] %>
			<span class='success'>
			  <%= h(flash[:success]) %>
			</span>
			<% end %>
		  </td></tr></table>

		</form>

	  </div>

	  <% if @profile_data %>
	  <div id="MySpaceTabs" class="yui-navset">
		<ul class="yui-nav">
		  <li id='profileTab' class="selected"><a href="#tab1"><em>Profile</em></a></li>
		  <li id='friendsTab'><a href="#tab2"><em>Friends</em></a></li>
		  <li id='albumsTab'><a href="#tab3"><em>Albums</em></a></li>
		</ul>            
		<div class="yui-content">
		  <div id='profileTabContent'>
            <p><img src="<%= @profile_data['person']['thumbnailUrl'] %>" /></p> 
            <p>Profile URL : <a href="<%= @profile_data['person']['profileUrl'] %>"> <%= @profile_data['person']['profileUrl'] %></a><p>
            <p>Name: <strong> <%= @profile_data['person']['name']['givenName'] %>  <%= @profile_data['person']['name']['familyName'] %></strong> </p> 
            <p>Gender: <strong> <%= @profile_data['person']['gender'] %> </strong> </p>
            <p>Age: <strong> <%= @profile_data['person']['age'] %> </strong> </p>
            <p>Marital Status: <strong> <%= @profile_data['relationshipStatus'] %> </strong> </p>
            <p>City: <strong> <%= @profile_data['person']['currentLocation']['locality'] %> </strong> </p>
            <p>Postal Code: <strong> <%= @profile_data['person']['currentLocation']['postalCode']  %> </strong> </p>
            <p>Region: <strong> <%= @profile_data['person']['currentLocation']['region']  %> </strong> </p>
            <p>Country: <strong> <%=@profile_data['person']['currentLocation']['country'] %> </strong> </p>
		  </div>
		  <div id='friendsTabContent'>
			<% for friend in @friends_data['entry'] %>
			<a href='<%=friend['person']['profileUrl']%>'>
			  <img id='<%=friend['person']['displayName']%>' title='<%=friend['person']['displayName']%>' border='0'/>
			</a>
			<% end %>
		  </div>
		  <div id='albumsTabContent'>
            
			<p>Photos Albums<p>
			<% for entry in @album_data['entry'] %>
				<img id='<%=entry['album']['id']%>' title='<%=entry['album']['title']%>' border='0'/>
				<p>
					<%=entry['album']['title']%>
				</p>
			<% end %>
			
		  </div>
		</div>
	  </div>

	  <script type="text/javascript">
		var myTabs = new YAHOO.widget.TabView("MySpaceTabs");

		// Friends Tab Image Loader
		var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');
		var tabThreeImageGroup = new YAHOO.util.ImageLoader.group('albumsTab', 'mouseover');

		<% for friend in @friends_data['entry'] %>
		tabTwoImageGroup.registerSrcImage('<%= friend['person']['displayName']%>', '<%= friend['person']['thumbnailUrl'] %>');
		<% end %>

		<% for entry in @album_data['entry'] %>
			tabThreeImageGroup.registerSrcImage('<%= entry['album']['id']%>', '<%= entry['album']['thumbnailUrl'] %>');
		<% end %>


		tabTwoImageGroup.addTrigger('friendsTab', 'focus');
		tabTwoImageGroup.name = 'tab_two_group';
		tabThreeImageGroup.addTrigger('albumsTab', 'focus');
		tabThreeImageGroup.name = 'tab_three_group';

		// Albums Tab Image Loader

	  </script> 
	  <% end %>

	</body>
  </html>
